<?php echo $header;?>
<!-- Bootstrap core CSS -->

<link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
<link href="/static/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<!-- jPList js and css  -->
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-core.min.css" rel="stylesheet" type="text/css"/>
<script src="/static/jquery/jquery-plugins/jplist/js/jplist-core.min.js"></script>

<!-- jplist pagination bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.pagination-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-pagination-bundle.min.css" rel="stylesheet"
      type="text/css"/>

<!-- jplist history bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.history-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-history-bundle.min.css" rel="stylesheet" type="text/css"/>
<!-- textbox filter control -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.textbox-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-textbox-control.min.css" rel="stylesheet" type="text/css"/>
<!-- jplist toggle bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.filter-toggle-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-filter-toggle-bundle.min.css" rel="stylesheet" type="text/css"/>
<!-- filter dropdown control -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.filter-dropdown-bundle.min.js"></script>

<!-- preloader -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.preloader-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-preloader-control.min.css" rel="stylesheet" type="text/css"/>

<!-- filter dropdown control -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.filter-dropdown-bundle.min.js"></script>

<script src="/static/handlebars-v3.0.3.js"></script>
<script src="/static/js/template.js"></script>
<script src="/static/jquery/jquery-plugins/ypf-taber.js"></script>
<script src="/static/jquery/jquery-plugins/ypf-tools.js"></script>

<script src="/static/bootstrap/js/bootstrap-typeahead.js"></script>

<link href="/static/bootstrap/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css"/>
<script src="/static/bootstrap/js/bootstrap-multiselect.js" charset="UTF-8"></script>

<script src="/static/jquery/jquery-plugins/lhgcalendar-3.0.0/jquery-1.7.1.min.js"></script>
<script src="/static/jquery/jquery-plugins/lhgcalendar-3.0.0/lhgcalendar.min.js"></script>
<script src="/chart/dist/echarts.js"></script>
<script src="/chart/dist/chart/bar.js"></script>
<div class="container-fluid">
    <div class="row">
        <?php echo $slide_common;?>
        <div class="col-sm-11 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!--<h2 class="sub-header"></h2>-->
            <ul class="nav nav-tabs sub-tabs" role="tablist">

                <li
                        class="active"
                        data-class="tabClicker"
                        data-requestUrl="<?php echo $actions['autoCreateModule'];?>"
                        data-requestType="get"
                        data-requestParams=""
                        data-triggerAuto="true"
                        data-action="tabClicker"
                        data-callback="callback_create_module">
                    <a href="#tab_li_list" role="tab" data-toggle="tab">创建模块</a>
                </li>
            </ul>
            <div class="tab-content sub-tab-content">
                <div id="tab_li_list" class="tab-pane fade active in">

                </div>

            </div>

            <?php echo $footer;?>
        </div>
    </div>
    <!-- 加载模板文件 -->
    <?php Templater(array(
            'templates/temp_ddos_top.html',  //DDoS攻击TOP
        ), __DIR__);?>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //注意jQuery版本的加载顺序（先加载1.11.2版本，再加载1.7版本）
        //使用1.7版本
        var jq1_7_1 = jQuery.noConflict(true);
        jq1_7_1('.lhgcalendar').calendar({
            format: 'yyyy-MM-dd HH:mm:ss',
        });

        layer.config({
            skin:'layer-ext-moon',
            extend:'skin/moon/style.css'
        });
        $('li[data-action=tabClicker]').YpfTaber({
            'requestBefore': function () {
                $('.tab-content').addClass('admin-ypf-loading');
            },
            'callback_maps': {
                callback_create_module: function(res){
                    $('#tab_li_list').handlebars($('#template-create-module'), res);
                    $('#role_list_select').multiselect({
                        templates:{
                            ul: '<ul class="multiselect-container dropdown-menu" style="padding-left: 10px;"></ul>',
                        },
                        nonSelectedText: '请选择角色',
                        selectAllText: '全选',
                        allSelectedText: '全选',
                        maxHeight: 300,
                        buttonWidth: '250px',

                        includeSelectAllOption: true,
                        enableFiltering: true,
                        filterPlaceholder: '搜索...',
                        onSelectAll: function() {

                        }
                    });
                },

            },
            'callbackAfter': function () {
                $('.tab-content').removeClass('admin-ypf-loading');
            }
        });

        $(document).off('click', "[data-class='action']").on('click', "[data-class='action']", function () {
            switch ($(this).attr('data-action')) {
                case 'saveCreateModule':
                    $.post(
                            $('#form_create_module').attr('action'),
                            $('#form_create_module').serialize(),
                            function(res){
                                if(1 == res.status){
                                    layer.msg(res.info, {icon:res.status});
//                                    $('button[name=reset]').click();
                                    window.location.reload();
                                }else{
                                    layer.msg(res.info, {icon:res.status, time: 10000});
                                }
                            }
                    );
                    return false;

                    break;
                case 'getTableFields':
                    $.get(
                        $(this).data('url'),
                        {
                            db_name: $('select[name="model[dna_db_name]"]').val(),
                            table_name: $('input[name="model[dna_table_name]"]').val()
                        },
                        function(res){
                            layer.msg(res.info, {icon:res.status});
                            $('#table_fields_container').handlebars($('#template-table-field'), res.data);
                        }
                    );
                    return false;

                    break;
                default:
                    break;
            }
        });

    });
</script>

<!-- 添加防火墙IP模板 开始 -->
<script src="/static/jquery/jquery-plugins/jquery-multiselect/jquery.select-multiple.js"></script>
<script src="/static/jquery/jquery-plugins/jquery-multiselect/jquery.quicksearch.js"></script>


<!--列表模板 开始 -->
<script id="template-create-module" type="text/template">
    {{#data}}
    <form id="form_create_module"  class="form-horizontal"
          style="padding: 10px;width: 60%"
          action="<?php echo $actions['autoCreateModule'];?>" method="post">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Module设置</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">菜单名称</label>
                    <div class="col-sm-6">
                        <input name="module[dna_doc_title]"
                               type="text"
                               class="form-control"
                               placeholder="设置模块菜单名称"
                               value="" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">模块设置</label>
                    <div class="col-sm-6">
                        <select name="module[dna_module_dir]" class="common-input" style="width: 180px;">
                            <option value="">请选择模块所属目录</option>
                            {{#module_list}}
                            <option value="{{.}}">{{.}}</option>
                            {{/module_list}}
                        </select>

                        &nbsp; / &nbsp;
                        <input name="module[dna_module_name]"
                               type="text"
                               class="common-input"
                               placeholder="模块名（必填）"
                               value="" style="width: 200px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Model设置</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">模型名称</label>
                    <div class="col-sm-6">
                        <input name="model[dna_class_name]"
                               type="text"
                               class="form-control"
                               placeholder="模型名称（必填）"
                               value="" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">数据表名称</label>
                    <div class="col-sm-6">
                        <select name="model[dna_db_name]" class="common-input" style="width: 120px;">
                            <option value="default">ypf_demo</option>
                        </select>
                        /
                        <input name="model[dna_table_name]"
                               type="text"
                               class="common-input"
                               placeholder="默认为模型名（驼峰命名转换成_分割）"
                               value="" style="width: 270px;">
                    </div>
                    <button type="button" class="btn btn-info" name=""
                            data-action="getTableFields"
                            data-class="action"
                            data-url="{{actions.getTableFields}}" >获取数据表字段</button>
                </div>
                <div class="form-group" id="table_fields_container">

                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Service设置</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">服务类名</label>
                    <div class="col-sm-6">
                        <input name="service[dna_class_name]"
                               type="text"
                               class="form-control"
                               placeholder="服务类名（必填）"
                               value="" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">管理模型名</label>
                    <div class="col-sm-6">
                        <input name="service[dns_model_name]"
                               type="text"
                               class="form-control"
                               placeholder="不填则默认为上面的模型"
                               value="" >
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">模块授权</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">角色</label>
                    <div class="col-sm-6">
                        <select  multiple id="role_list_select" name="role[role_id][]" class="common-input">
                            {{#role_list}}
                            <option value="{{id}}">{{name}}</option>
                            {{/role_list}}
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
                <button name="button" type="button" class="btn btn-primary" data-class="action" data-action="saveCreateModule">保存</button>
                <button name="reset" type="reset" class="btn btn-warning" >重置</button>
            </div>
        </div>
    </form>
    {{/data}}
</script>
<!-- 列表模板 结束 -->

<!--列表模板 开始 -->
<script id="template-table-field" type="text/template">
    <label class="col-sm-2 control-label">数据表字段</label>
    <div class="col-sm-10">
        <div class="panel panel-default" style="">
            <div class="panel-heading">
                <h3 class="panel-title">字段列表</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="check_all" value=""/>
                            </th>
                            <th>
                                字段名
                            </th>
                            <th>字段类型</th>
                            <th>字段说明</th>
                            <th>表单类型</th>
                            <th>列表|新增|编辑</th>
                            <th>表单配置项</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{#.}}
                        <tr>
                            <th scope="row">
                                <input type="checkbox" name="model[dna_table_fields][]"
                                       value="{{form_value}}" checked="checked"/>
                            </th>
                            <th scope="row">{{field}}</th>
                            <td>{{type}}</td>
                            <td>{{comment}}</td>
                            <td>{{form_type}}</td>

                            <th scope="row">
                                <input type="checkbox" name="model[dna_table_fields_show][{{field}}][list]"
                                       value="1" checked="checked"/> &nbsp;
                                <input type="checkbox" name="model[dna_table_fields_show][{{field}}][add]"
                                       value="1" checked="checked"/> &nbsp;
                                <input type="checkbox" name="model[dna_table_fields_show][{{field}}][edit]"
                                       value="1" checked="checked"/>
                            </th>
                            <td>
                                {{#compare 'tinyint' '==' type}}
                                <input name="model[dna_form_setting][{{field}}]"
                                       class="form-control" type="text" value=""
                                       placeholder="配置项：1|启用,2|禁用"
                                />
                                {{/compare}}
                            </td>
                        </tr>
                        {{/.}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</script>
<!-- 列表模板 结束 -->